<template> 
	<view class="content">
		<view class="box">
			<view class="tbs">
				<view @click="goDesign()" class="con">设计师</view>
				<view @click="gobranfd()">品牌馆</view>
				<view @click="getIndex(list)">精选</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					<view class="address">{{name}}
						<view style="margin-left:5px;">
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>


					<view class="address_log">
						<view class="img_wh">

							<image src="/static/home/add_log.png" mode="widthFix"></image>
						</view>
						<view class="local_add">当前位置</view>
					</view>
					<view class="clear"></view>
				</view>


				<view class="cont_center">
					<input type="text" value="" placeholder="关键词/美发师/美容师/美妆师" v-model="content" />
				</view>
				<view class="cont_bottom">
					<input type="text" value="" placeholder="设计师星级" v-model="xingji" />
				</view>
				<view class="cont_btn">
					<view class="btn" @click="goDesign">搜索</view>
				</view>
			</view>

 


		</view>
		<!-- //宫格部分 -->
		<view class="grild">
			<view @click="goBranch()">
				<view class='pic_Hair'>
					<image src="../../../static/home/fa.png" mode=""></image>
				</view>
				<view class="text">美发</view>

			</view>
			<view>
				<view class='pic_appearance'>
					<image src="../../../static/home/rong.png" mode=""></image>
				</view>
				<view class="text">美容</view>

			</view>
			<view>
				<view class='pic_mack'>
					<image src="../../../static/home/zhuang.png" mode=""></image>
				</view>
				<view class="text">美妆</view>

			</view>
			<view>
				<view class='pic_nail'>
					<image src="../../../static/home/jia.png" mode=""></image>
				</view>
				<view class="text">美甲</view>

			</view>
			<view>
				<view class='pic_body'>
					<image src="../../../static/home/ti.png" mode=""></image>
				</view>
				<view class="text">美体</view>

			</view>

		</view>
		<!-- 整体形象服务开创者 -->
		<view class="start">
			<view class="left">
				<view class="strat-con">
					<view class="start_top">整体形象服务开创者 享受时尚生活</view>
					<view class="start_bottom">

						<view class="Rz">
							<image src="../../../static/home/Rz.png" mode=""></image>
						</view>
						<view class="text">双证认证</view>


						<view class="serve">
							<image src="../../../static/home/serve.png" mode=""></image>
						</view>
						<view class="text">服务优选</view>


						<view class="Pp">
							<image src="../../../static/home/Pp.png" mode=""></image>
						</view>
						<view class="text">品牌保障</view>


					</view>
				</view>
			</view>
			<view class="right">
				<view class="right_cont" @click="goDesignEnter()">
					设计师入住
				</view>
			</view>

		</view>
		<!-- //分割线 -->
		<!-- <view class="hr"></view> -->
		<!-- //卡片 -->
		<view class="card">
			<view class="card_left">
				<view class="vip">
					<view class="vip_text">美VIP</view>

					<view class="entvip">加入会员专享区</view>
				</view>

				<view class="open_vip">开通会员仅需365元/年，可享受诸多优惠</view>
				<view class="card_bottom">
					<view>优先预约</view>
					<view>优惠折扣</view>
					<view>免费体验</view>
				</view>
			</view>
			<view class="card_right">
				<view class="btn" @click="goMater">立即开通</view>
			</view>
		</view>
		<view class="yu">
			<view class="yue">预约到店</view>
			<view class="yue">预约上门</view>
		</view>
		<!-- <view style="height: 100px;"></view> -->
	</view>
</template>

<script>
	import {
		getCity
	} from '@/utils/address.js'
	export default {
		data() {
			return {
				// list: ['设计师', '品牌馆', '精选'],
				indexs: 0,
				value: '', //输入框的初始内容
				mei_list: [{
						pic: '/static/home/fa.png',
						name: '美发'
					},
					{
						pic: '/static/home/rong.png',
						name: '美容'
					},
					{
						pic: '/static/home/zhuang.png',
						name: '美妆'
					},
					{
						pic: '/static/home/jia.png',
						name: '美甲'
					},
					{
						pic: '/static/home/ti.png',
						name: '美体'
					}
				],
				name: '定位中',
				content: '',
				xingji: ''

			}
		},
		methods: {
			// 服务分类
			goBranch(){
				uni.navigateTo({
					url:'/pagesB/branch/servicebranch'
				})
			},
			//精选项目
			getIndex() {
				uni.navigateTo({
					url: '/pagesA/search_serve/searce_serve?city=' + this.name,
					fail: (err) => {
						console.log(err)
					}
				})

			},
			//跳转到会员购买
			goMater() {
				console.log('xxx')
				uni.navigateTo({
					url: '../index/home_member/member',
					fail(err) {
						console.log(err)
					}
				})
			},
			//跳转到品牌馆页面
			gobranfd() {
				uni.navigateTo({
					url: '/pagesA/search_branfd/search_branfd?city=' + this.name,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//去设计师
			goDesign() {
				uni.navigateTo({
					url: '/pagesA/search_design/search_design?occupationName=' + this.content + '&starRating=' + this.xingji +
						'&city=' + this.name,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//去设计师入驻申请
			goDesignEnter() {
				uni.navigateTo({
					url: '/pagesA/design_enter/design_enter',
					fail: (err) => {
						console.log(err)
					}
				})
			}
		},
		components: {

		},
		created() {
			let that = this
			this.$nextTick(function() {
				getCity().then(res => {
					that.name = res.address_component.city
					uni.$emit('dizhi',{
						city:that.name 
					})
				})
			})
		}

	}
</script>

<style scoped lang="less">
	.content {
		.box {
			display: flex;
			flex-direction: column;
			transform: translateY(-43rpx);
		}

		.tbs {
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			background: #F2F2F2;
			width: 85%;
			border-radius: 20rpx 20rpx 0 0;

			view {
				width: 232rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background: #F2F2F2;
				border-radius: 20rpx 30rpx 0px 20rpx !important;
				font-family: PingFang SC;
				color: #333333;
				font-weight: 400;
				font-size: 30rpx;



			}

			.con {
				font-family: PingFang;
				color: #000000;
				background: #FFFFFF;
				border-radius: 20rpx 30rpx 0px 0px;
				font-weight: 500;
				font-size: 30rpx;
			}
		}

		.cont {
			width: 80%;
			// height: 341rpx;
			// border: 1px red solid;
			margin: 0 auto;
			padding: 0 20rpx 0 20px;
			box-shadow: 0px 5px 8px 1px rgba(242, 242, 242, 0.79);

			.clear {
				clear: both;
			}

			input {
				height: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BBBBBB;
				// line-height: 85.25rpx;
			}

			.cont_top {
				border-bottom: 1px #E0E0E0 solid;
				// height: 85.25rpx;
				line-height: 48px;
				font-size: 25rpx;
				text-align: center;

				.address {
					display: flex;
					float: left;

				}

				.address_log {
					float: right;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.img_wh {
						width: 26rpx;
						height: 26rpx;

						image {

							width: 100%;
							height: 100%;
						}

					}

					.local_add {
						height: 15rpx;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #888888;
						// line-height: 30px;
					}
				}
			}

			.cont_center {
				height: 85.25rpx;
				width: 100%;

				input {
					width: 100%;
					height: 100%;
					border-bottom: 1px #E0E0E0 solid;

				}


			}

			.cont_bottom {
				height: 85.25rpx;

				input {
					width: 100%;
					height: 100%;
					border-bottom: 1px #E0E0E0 solid;
				}

			}

			.cont_btn {
				width: 100%;

				.btn {
					width: 80%;
					height: 70rpx;
					margin: 0 auto;
					background-color: #00C6C2;
					color: white;
					font-size: 30rpx;
					line-height: 70rpx;
					font-weight: bold;
					font-family: PingFang;
					text-align: center;
					border-radius: 4rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.grild {
			display: flex;
			justify-content: space-between;
			// padding-left: 100rpx;
			// padding-right:100rpx;

			align-items: center;

			view {
				// width: ;
				text-align: center;
				flex: 1;
				margin: 0 auto;

				.pic_Hair {
					width: 48rpx;
					height: 51rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pic_appearance {
					width: 56rpx;
					height: 49rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pic_mack {
					width: 42rpx;
					height: 52rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pic_nail {
					width: 48rpx;
					height: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pic_body {
					width: 48rpx;
					height: 49rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					line-height: 25rpx;
					padding-top: 19rpx;
				}
			}

			;
		}

		.start {
			margin: 35rpx 25px;
			background-color: #f8f8fa;
			box-shadow: -4px 0px 7px 0px rgba(203, 203, 203, 0.49);
			border-radius: 4rpx;
			display: flex;

			.left {
				.strat-con {
					padding: 22rpx 30rpx;

					.start_top {

						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #141414;
						line-height: 30rpx;
						padding-bottom: 23rpx;
					}

					.start_bottom {
						// width: 80%;
						display: flex;
						justify-content: space-between;
						font-size: 18rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #8B8B8B;
						line-height: 30rpx;
						align-items: center;

						.Rz {

							// display: flex;
							image {
								width: 14rpx;
								height: 15rpx;
							}
						}

						.Pp {
							image {
								width: 15rpx;
								height: 15rpx;
							}
						}

						.serve {
							image {
								width: 17rpx;
								height: 13rpx;
							}
						}


					}

				}
			}

			.right {
				// width: 120rpx;
				height: 50rpx;
				// margin: 27rpx 27rpx 22rpx 0;
				margin: 35rpx auto;
				background: #00C6C2;
				border-radius: 4rpx;

				.right_cont {

					text-align: center;
					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
					// line-height: 50rpx;
					opacity: 0.5;
					padding: 11rpx 11rpx 11rpx 10rpx;
				}
			}


		}

		.hr {
			// width: 750px;
			width: 100%;
			height: 12px;
			background: #E7E7E7;
		}

		.card {
			margin: 25rpx 25rpx;
			// height: 190rpx;
			box-shadow: 0px 3px 7px 0px rgba(100, 100, 100, 0.64);
			background: #363536;
			display: flex;

			.card_left {

				// width: 100%;
				.vip {
					display: flex;

					.vip_text { 
						padding-top: 30rpx;
						padding-left: 58rpx;
						font-size: 48rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-style: italic;
						color: #ECCFB0;
						opacity: 0.8;
					}

					.entvip {
						padding: 38rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ECCFB0;
						opacity: 0.8;
					}
				}

				.open_vip {
					margin-left: 58rpx;
					font-size: 0.3rem;
					font-family: PingFang SC;
					font-weight: 400;
					color: #EFCEAD;
					opacity: 0.8;
				}

				.card_bottom {
					display: flex;
					justify-content: space-between;

					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ECCFB0;
					opacity: 0.8;
					padding-left: 58rpx !important;
					padding: 20rpx;

					view {

						border: 1rpx solid #ECCFB0;
						box-shadow: 0px 2rpx 25rpx 0rpx rgba(181, 150, 117, 0.4);
						border-radius: 6rpx;
					}
				}


			}

			.card_right {
				.btn {
					// padding: 65rpx 41rpx;
					margin-top: 75rpx;
					margin-left: 10rpx;
					width: 180rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background: linear-gradient(0deg, #E5C29E 0%, #FDE9D4 100%);
					box-shadow: 0px 2rpx 25rpx 0px rgba(181, 150, 117, 0.4);
					border-radius: 30rpx;
					opacity: 0.8;
					font-size: 1rem;
					font-family: PingFangSC;
					font-weight: 500;
					color: #3B3B39;
				}
			}
		}
		.yu{
			margin:22rpx ;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 10rpx solid #f7f7f7;
			
			.yue{
				width: 45%;				
				height: 138rpx;
				padding: 20rpx 0 0 20rpx;
				background-color: #dddddd;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				color:  #000000;
			}
		}
	}
</style>
